<template>
	<view class="mine-content-box">
		<view class="no-login-box" v-if="!isLogin">
			<image class="login-img" src="../../../static/login_hs.png" mode="aspectFill"></image>
			<view class="text">
				授权登录后可使用更多功能
			</view>
			<!-- <view class="login-btn">
				授权登录
			</view> -->
			<button class='login-btn' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">授权登录</button>
		</view>
		<view v-else class="logined-box">
			<view class="header-box">
				<image class="header-img" :src="avatarUrl" mode="aspectFill"></image>
				<view class="nick-name">
					{{nickName}}
				</view>
			</view>
		</view>
		
		<view class="nav-item mgt30">
			<view class="nav-text">
				我的发布
			</view>
			<image class="nav-arrow" src="../../../static/icon_arrow_right.png" mode="aspectFill"></image>
		</view>
		
		<view class="nav-item mgt30">
			<view class="nav-text">
				手机
			</view>
			<view class="right-box">
				<view class="text">
					无
				</view>
				<image class="nav-arrow" src="../../../static/icon_arrow_right.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="nav-item">
			<view class="nav-text">
				邮箱
			</view>
			<view class="right-box">
				<view class="text">
					无
				</view>
				<image class="nav-arrow" src="../../../static/icon_arrow_right.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="nav-item">
			<view class="nav-text">
				医院
			</view>
			<view class="right-box">
				<view class="text">
					无
				</view>
				<image class="nav-arrow" src="../../../static/icon_arrow_right.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="nav-item">
			<view class="nav-text">
				科室
			</view>
			<view class="right-box">
				<view class="text">
					无
				</view>
				<image class="nav-arrow" src="../../../static/icon_arrow_right.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="nav-item">
			<view class="nav-text">
				职称
			</view>
			<view class="right-box">
				<view class="text">
					无
				</view>
				<image class="nav-arrow" src="../../../static/icon_arrow_right.png" mode="aspectFill"></image>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import COMMON from "@/api/common/index.js"
	let loginStorKey = "loginInfo"
	let tokenKey = "token"
	export default {
		data() {
			return {
				isLogin: false,
				avatarUrl: "",
				nickName: "",
			};
		},
		created() {
			let loginData = uni.getStorageSync(loginStorKey);
			let token = uni.getStorageSync(tokenKey);
			console.log(token)
			if(token) {
				this.nickName = loginData.userInfo.nickName; //昵称
				this.avatarUrl = loginData.userInfo.avatarUrl; //头像
				this.isLogin = true
			}
		},
		methods:{
			wxGetUserInfo(){
				// 获取用户信息
				uni.getUserInfo({
					provider: 'weixin',
					success: (infoRes) => {
						console.log('infoRes:', infoRes)
						this.encryptedData = infoRes.encryptedData
						this.iv = infoRes.iv
						this.nickName = infoRes.userInfo.nickName; //昵称
						this.avatarUrl = infoRes.userInfo.avatarUrl; //头像
						uni.setStorageSync(loginStorKey,infoRes);
						this.wxLogin();
					},
					fail:function (fail){console.log("fail:",fail)}
				});
			},
			wxLogin(){
				uni.login({
					provider: 'weixin',
					success: (codeInfo) => {
						console.log(codeInfo)
						const {errMsg="",code} = codeInfo
						if(codeInfo.errMsg === "login:ok"){
							COMMON.login({code}).then(resp=>{
								console.log(resp)
								uni.setStorageSync(tokenKey,resp.token);
								this.showToast("登录成功")
								this.isLogin = true
							})
						}else{
							this.showToast("登录失败")
						}
						
					},
					fail: (fail) => {
						console.log("fail:",fail)
					}
				})
			},
			showToast(text) {
				uni.showToast({
					title: text,
					duration: 2000,
					icon: "none"
				});
			}
		}
	}
</script>

<style lang="less">
view{
	box-sizing: border-box;
}
.mine-content-box{
	.no-login-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 120rpx;
		.login-img{
			width: 200rpx;
			height: 300rpx;
		}
		.text{
			font-size: 24rpx;
			color: #AAAAAA
		}
		.login-btn{
			width: 400rpx;
			height: 70rpx;
			border-radius: 35rpx;
			background-color: #0098f2;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
		}
	}
	.logined-box{
		.header-box{
			width: 100%;
			height: 220rpx;
			background-color: #0098f2;
			padding-left: 30rpx;
			display: flex;
			align-items: center;
			.header-img{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.nick-name{
				font-size: 30rpx;
				color: #FFFFFF;
				margin-left: 16rpx;
			}
		}
	}
	.nav-item{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		padding: 0px 20rpx;
		justify-content: space-between;
		background-color: #FFFFFF;
		border-bottom: solid 1rpx #eaeefb;
		.nav-text{
			font-size: 30rpx;
			color: #323233;
		}
		.right-box{
			display: flex;
			align-items: center;
			.text{
				color: #AAAAAA;
			}
		}
		.nav-arrow{
			width: 50rpx;
			height: 42rpx;
		}
		
	}
	.mgt30{
		margin-top: 30rpx;
	}
}
</style>
